<template>
    <div v-if="rl"> 
         <!-- 当rl =true 时 为对话面对方 -->
        <div class="chat-sender">
            <div>
                <img :src="ImgUrl">
            </div>
            <div>{{name}}</div>
        <div>
        <div class="chat-left_triangle"></div>
            <span> {{message}}</span>
        </div>
        </div>
    </div>
    <div v-else>
         <!-- 当rl =false 时 为己方 -->
          <div class="chat-receiver">
            <div>
                <img :src="ImgUrl">
            </div>
            <div>{{name}}</div>
            <div>
                <div class="chat-right_triangle"></div>
                <span> {{message}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'chat_item',
    props:{
        rl:{
            type:Boolean,
            default:true
        },
        // 当rl =false 时 为己方
        // 当rl =true 时 为对话面对方
        ImgUrl:{
            type:String,
            default:require('@/assets/logo.png')
        },
        name:{
            type:String,
            default:'test'
        },
        message:{
            type:String,
            default:'testmessage'
        }
    },
    mounted(){
    }
}
</script>

<style scoped>
@import "../style/chat_item.css";

</style>